<template>
  <sys-page ref="page" :columns="columns" :model="model" :loader="loader" :label-width="null" @add="onAdd"
            :query-props="{showAddBtn: $hasPerm('sys:user:save'), expandAble: false}">
    <template v-slot:form>
      <el-form-item label="用户名">
        <el-input v-model="model.username" placeholder="用户名" clearable></el-input>
      </el-form-item>
    </template>

    <template v-slot:status="{row}">
      <tag-status :value="row.status" mapper="userStatusMap"/>
    </template>

    <template v-slot:ctrl="{row}">
      <el-button v-if="row.userId !== 1" v-perm:sys:user:update type="text" icon="el-icon-edit"  size="small" @click="onEdit(row.userId)">修改</el-button>
      <el-button v-if="row.userId !== 1" v-perm:sys:user:delete type="text" icon="el-icon-remove" class="btn-danger" size="small" @click="onDelete(row.userId)">删除</el-button>
    </template>
  </sys-page>
</template>

<script>
import {getSysUserList, postSysUserDelete} from '$my/code/api/sys-user'
import edit from '@/components/modules/user/edit'

function getColumns() {
  return [
    {type: 'index', label: '序号', align: 'center'},
    {prop: 'userId', label: 'ID', align: 'center', minWidth: 120, showOverflowTooltip: false, display: true},
    {prop: 'username', label: '用户名', align: 'center', minWidth: 100, showOverflowTooltip: true, display: true},
    {prop: 'email', label: '邮箱', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'mobile', label: '手机号', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'roleNames', label: '所属角色', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'status', label: '状态', align: 'center', minWidth: 120, showOverflowTooltip: true},
    {prop: 'createUserName', label: '创建人', align: 'center', minWidth: 120, showOverflowTooltip: true},
    {prop: 'createTime', label: '创建时间', align: 'center', minWidth: 150, showOverflowTooltip: true},
    {prop: 'updateTime', label: '更新时间', align: 'center', minWidth: 150, showOverflowTooltip: true},
    {prop: 'ctrl', label: '操作', width: '150px', fixed: 'right', align: 'center', display: 'always'}
  ]
}

export default {
  name: 'user',
  data() {
    return {
      model: {
        username: '',
        phone: ''
      },
      columns: getColumns()
    }
  },
  methods: {
    async loader(model) {
      return getSysUserList(model)
    },
    onAdd() {
      this.$refs.page.setDialog({
        title: '新增用户',
        comp: edit
      })
    },
    onEdit(id) {
      this.$refs.page.setDialog({
        title: '编辑用户',
        comp: edit,
        props: {
          id
        }
      })
    },
    onDelete(id) {
      const userIds = id
? [id]
: this.$refs.page.shopList.map(item => {
        return item.userId
      })
      this.$confirm('确定进行[删除]操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postSysUserDelete(userIds).then(res => {
          this.$notify.success('操作成功!')
          this.$refs.page.reload()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
}
</style>
